<template>
  <Temp title="相机位置">
    <div class="camera-config">
      <el-button
        size="small"
        type="text"
        @click="setPosition"
      >
        <i class="el-icon-setting" />
        <span>设置位置</span>
      </el-button>

      <el-button
        size="small"
        type="text"
        @click="clearPosition"
      >
        <i class="el-icon-remove" style="color: red" />
        <span style="color: red">清除位置</span>
      </el-button>
    </div>

    <div class="temp-close" @click="close"></div>
  </Temp>
</template>

<script>
import Temp from '@/components/utool/components/temp'
import { getAction } from '@/utils/helper'
import {
  setCameraConfig,
  removeCameraConfig
} from '@/api/camera'
import cacheUtil from '@/utils/cache'

const _viewer = {}

export default {
  name: 'index',
  components: {
    Temp
  },
  inject: ['viewerId'],
  data() {
    return {
      longitude: '',
      latitude: '',
      height: ''
    }
  },
  async created() {
    const { viewer } = await getAction(this.viewerId)
    _viewer[this.viewerId] = viewer
  },
  methods: {
    close() {
      this.$emit('close')
    },
    setPosition() {
      const cameraPosition =
        _viewer[this.viewerId].camera.position
      console.log('cameraPosition', cameraPosition)
      const cartographic =
        Cesium.Cartographic.fromCartesian(cameraPosition)
      console.log('cartographic', cartographic)
      const longitude = Cesium.Math.toDegrees(
        cartographic.longitude
      ).toFixed(6)
      const latitude = Cesium.Math.toDegrees(
        cartographic.latitude
      ).toFixed(6)
      const height = Number.parseInt(cartographic.height)
      console.log(longitude, latitude, height)
      setCameraConfig({
        cameraHeight: height,
        centerPoint: `${longitude},${latitude}`
      })
        .then((res) => {
          console.log(res)
          if (res.success) {
            this.$message.success('设置成功')
            cacheUtil.setItem(
              'camera',
              JSON.stringify({
                cameraHeight: height,
                centerPoint: `${longitude},${latitude}`
              })
            )
          } else {
            this.$message.error(res.message || '设置失败')
          }
        })
        .catch((err) => {
          console.error('设置相机位置失败', err)
        })
    },
    clearPosition() {
      removeCameraConfig(cacheUtil.getItem('userId'))
        .then((res) => {
          console.log(res)
          if (res.success) {
            this.$message.success('清除成功')
            cacheUtil.setItem('camera', '')
          } else {
            this.$message.error('清除失败')
          }
        })
        .catch((err) => {
          console.error('移除相机位置失败', err)
        })
    }
  }
}
</script>

<style scoped lang="scss">
.camera-config {
  display: flex;
  align-items: center;
  background-color: rgba(25, 59, 81, 1);
  padding: 0 10px;

  ::v-deep {
    .el-button {
      font-size: 14px;

      & > span {
        display: flex;
        align-items: center;

        i {
          font-size: 18px;
        }
      }
    }
  }
}

.temp-close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  background-color: red;
  border-radius: 50%;
  cursor: pointer;

  &::after,
  &::before {
    content: '';
    width: 50%;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #fff;
  }

  &::before {
    transform: translateX(-50%) translateY(-50%)
      rotateZ(45deg);
  }

  &::after {
    transform: translateX(-50%) translateY(-50%)
      rotateZ(-45deg);
  }
}
</style>
